import {designPage} from "@peryl/react-compose";
import {$configuration, $notice, AutoTable, i18n, PlcInput} from "plain-design";
import {PlainObject} from "@peryl/utils/event";
import {useTableOption} from "../../modules/plain-design/useTableOption";

export default designPage(() => {

  const http = $configuration.use('http');
  const checkNewCode = async (row: PlainObject) => {
    const { code, name, id } = row;

    const filterCode = { id: 'check_code', field: 'code', value: code, operator: '=' };
    const filterName = { id: 'check_name', field: 'name', value: name, operator: '=' };
    const filterId = { id: 'check_id', field: 'id', value: [id], operator: '!=' };

    const { list } = await http.post<{ list: any[] }>('/address/list', {
      ...!id ? {
        filters: [filterCode, filterName],
        filterExpression: '(check_code or check_name)',
      } : {
        filters: [filterCode, filterName, filterId],
        filterExpression: '(check_code or check_name) and (check_id)',
      },
    });
    if (list.length > 0) {
      $notice.error('地址代码或者地址名称唯一性冲突！');
      return Promise.reject();
    }
  };

  const provinceOption = useTableOption({
    url: '/address',
    param: { queries: [{ field: 'deep', value: '0', operator: '=' }] },
    defaultNewRow: { deep: 0, },
    showRows: 5,
    sort: {
      field: 'code',
      desc: false,
    },
  });

  const cityOption = useTableOption({
    url: '/address',
    showRows: 5,
    defaultNewRow: { deep: 1, },
    parentOption: provinceOption,
    parentMap: { parentName: 'name', parentCode: 'code' },
  });

  const districtOption = useTableOption({
    url: '/address',
    showRows: 5,
    defaultNewRow: { deep: 2, },
    parentOption: cityOption,
    parentMap: { parentName: 'name', parentCode: 'code' },
  });

  provinceOption.hooks.onBeforeSaveRow.use(row => checkNewCode(row));
  cityOption.hooks.onBeforeSaveRow.use(row => checkNewCode(row));
  districtOption.hooks.onBeforeSaveRow.use(row => checkNewCode(row));

  return () => <>
    <AutoTable option={provinceOption}>
      <PlcInput title={i18n.$intl('page.cascadeList.addressCode').d("地址代码")} field="code" required/>
      <PlcInput title={i18n.$intl('page.cascadeList.addressName').d("地址名称")} field="name" required defaultSearch/>
      <PlcInput title={i18n.$intl('page.cascadeList.longitude').d("经度")} field="longitude"/>
      <PlcInput title={i18n.$intl('page.cascadeList.latitude').d("纬度")} field="latitude"/>
    </AutoTable>
    <AutoTable option={cityOption}>
      <PlcInput title={i18n.$intl('page.cascadeList.addressCode').d("地址代码")} field="code" required/>
      <PlcInput title={i18n.$intl('page.cascadeList.addressName').d("地址名称")} field="name" required defaultSearch/>
      <PlcInput title={i18n.$intl('page.cascadeList.longitude').d("经度")} field="longitude"/>
      <PlcInput title={i18n.$intl('page.cascadeList.latitude').d("纬度")} field="latitude"/>
      {/*<PlcInput title="父级地址名称" field="parentName"/>*/}
      {/*<PlcInput title="父级地址代码" field="parentCode"/>*/}
    </AutoTable>
    <AutoTable option={districtOption}>
      <PlcInput title={i18n.$intl('page.cascadeList.addressCode').d("地址代码")} field="code" required/>
      <PlcInput title={i18n.$intl('page.cascadeList.addressName').d("地址名称")} field="name" required defaultSearch/>
      <PlcInput title={i18n.$intl('page.cascadeList.longitude').d("经度")} field="longitude"/>
      <PlcInput title={i18n.$intl('page.cascadeList.latitude').d("纬度")} field="latitude"/>
      {/*<PlcInput title="父级地址名称" field="parentName"/>*/}
      {/*<PlcInput title="父级地址代码" field="parentCode"/>*/}
    </AutoTable>
  </>;

});
